const path = require("path");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|webp)(\?.*)?$/i; //图片压缩拓展名
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const isProd = process.env.NODE_ENV === "production";
const webpack = require("webpack");
module.exports = {
    // 部署应用包基本路劲
    publicPath: "./",
    // build命令生成的构建目录
    outputDir: "dist",
    // 放置静态资源(js、css、img、fonts)
    assetsDir: "static",
    // 指定生成的index.html输出路径
    indexPath: "index.html",
    // 静态资源文件hash
    filenameHashing: true,
    // 开发环境es-linter检查代码
    lintOnSave: false, //!isProd,
    // 加速生产环境构建
    productionSourceMap: false,
    // 页面配置
    pages: {
        index: {
            // page 的入口
            entry: "src/main.js",
            // 模板来源
            template: "public/index.html",
            // 在 dist/index.html 的输出
            filename: "index.html",
            // 当使用 title 选项时，
            title: "模板编辑",
        },
    },
    // 配置全局共享scss
    css: {
        requireModuleExtension: true,
        sourceMap: !isProd,
        loaderOptions: {
            scss: {
                prependData: `@import "~@/components/assets/index.scss";`,
            },
        },
    },
    // 配置webpack
    configureWebpack: (config) => {
        config.devtool = "source-map"
        if (isProd) {

            //开启gzip
            config.plugins.push(
                new CompressionWebpackPlugin({
                    // filename: "[path].gz[query]",
                    filename: "[path][base].gz[query]",
                    algorithm: "gzip",
                    test: productionGzipExtensions,
                    threshold: 10240,
                    minRatio: 0.8,
                    deleteOriginalAssets: false // 删除原文件
                })
            );
            config.plugins.push(
                // 限制打包的个数(减少打包生成的js文件和css文件)
                new webpack.optimize.LimitChunkCountPlugin({
                  // // 使用大于或等于 1 的值，来限制 chunk 的最大数量
                  maxChunks: 25,
                  minChunkSize: 100,
                })
              );
            //去除项目console
            config.plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        output: {
                            comments: false, // 去掉注释
                        },
                        compress: {
                            drop_console: false,
                            drop_debugger: true,
                            pure_funcs: ["console.log"], //移除console
                        },
                    },
                })
            );
            config["performance"] = {
                //打包文件大小配置
                maxEntrypointSize: 10000000,
                maxAssetSize: 30000000,
            };

        }
        config.plugins.push(
            new webpack.ProvidePlugin({
                'window.Quill': 'quill/dist/quill.js',
                'Quill': 'quill/dist/quill.js',
            })
        )
    },

    transpileDependencies: ['webpack-dev-server/client'],

    // 链式操作，定义具名laoder和plugins
    chainWebpack: (config) => {
        config.entry.app = ['babel-polyfill', './src/main.js'];
        config.module
            .rule('vue')
            .test(/\.vue$/)
            .use('style-vw-loader')
            .loader('style-vw-loader')
            .options({
                unitToConvert: 'px',
                viewportWidth: 1920,
                unitPrecision: 5,
                viewportUnit: 'rem',
                fontViewportUnit: 'rem',
                minPixelValue: 1,
            })
            .end();

        config.plugin('define').tap((args) => {
            args[0]['process.env']['SELF_CONFIG'] = JSON.stringify(process.env);
            return args;
        });
        // 修复HMR
        config.resolve.symlinks(true);
        // 别名配置
        config.resolve.alias
            //默认@ 指向/src
            .set("@c", path.resolve(__dirname, "./src/components"))
            .set("@sc", path.resolve(__dirname, "./src/scenes"))
            .set("@s", path.resolve(__dirname, "./src/services"))
            .set("@a", path.resolve(__dirname, "./src/components/assets"))
            .set("@detailsEdit", path.resolve(__dirname, "./src/scenes/templateDetails/modules/homeRight/property-editor/module"));
        // config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
        config.module
            .rule('svg')
            .exclude.add(path.resolve(__dirname, './src/components/public/svg-icon/icons'))
            .end();
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(path.resolve(__dirname, './src/components/public/svg-icon/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({ symbolId: 'icon-[name]' })
    },
    // 代理服务器
    devServer: {
        open: true,
        port: "8080",
        proxy: {
            '^/clinic': {
                changeOrigin: true, //是否跨域
                target: `http://192.168.77.223:7000/clinic`, // 远端地址
                pathRewrite: { '^/clinic': '' },
            },
            '^/tpleditor': {
                changeOrigin: true, //是否跨域
                target: `http://192.168.77.223:7000/tpleditor`, // 远端地址
                pathRewrite: { '^/tpleditor': '' },
            },
            '^/design': {
                changeOrigin: true, //是否跨域
                target: `http://192.168.77.223:7000/design`, // 远端地址
                pathRewrite: { '^/design': '' },
            },
            '^/templateFront': {
                changeOrigin: true, //是否跨域
                target: `http://192.168.77.223:7000/templateFront`, // 远端地址
                pathRewrite: { '^/templateFront': '' },
            },
            '^/upload': {
                changeOrigin: true, //是否跨域
                target: `http://192.168.77.223:7000/upload`, // 远端地址
                pathRewrite: { '^/upload': '' },
            },
        },
    },
};
